<template>
	<div class="news_detail">
		<div class="content">
			<div class="title">{{ newsDetail.title }}</div>
			<div class="head">
				<StatItem icon="Timer" :value="formatTime" />
				<div style="display: flex; align-items: center;">
					<StatItem icon="View" :value="newsDetail.view_count" style="margin-right: 20px;" />
					<StatItem icon="Star" :value="newsDetail.like_count" @click="likeNews" style="cursor: pointer;"
						:style="[isLike ? 'color: #ff0000;' : '']" />
				</div>
			</div>
			<div v-html="newsDetail.content" style="margin-top: 30px; padding: 0 30px;"></div>
			<!-- 评论功能模块 -->
			<div class="comment-section" style="margin-top: 40px; padding: 30px 30px 0; ">
				<h3>评论（{{ comments.length }}）</h3>

				<!-- 评论输入框 -->
				<div class="comment-form" style="margin: 20px 0;">
					<el-input v-model="newComment" type="textarea" :rows="3" placeholder="写下你的评论..." />
					<el-button type="primary" style="margin-top: 10px;" @click="submitComment"
						:disabled="!newComment.trim()">
						提交评论
					</el-button>
				</div>

				<!-- 评论列表 -->
				<div class="comment-list">
					<CommentItem 
						v-for="comment in comments" 
						:key="comment.id" 
						:comment="comment"
						:depth="0"
						:active-reply-id="activeReplyId"
						:reply-content="replyContent"
						:submit-reply="submitReply"
						@update:replyContent="val => replyContent = val"
						@reply="handleReply"
					/>
					</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
import { news_detail, view_count, like, comment_list, comment_create, comment_like } from '/@/api/news'
import { ElMessage } from "element-plus";
import StatItem from "/@views/news/component/StatItem.vue";
import CommentItem from "/@views/news/component/CommentItem.vue";
import dayjs from "dayjs";
const route = useRoute()

// 评论相关状态
const comments = ref([])
const newComment = ref('')
const currentReplyComment = ref(null)
const commentPage = ref({
	page: 1,
	page_size: 10,
	total: 0,
})

const replyInputVisible = ref({})
const activeReplyId = ref(null)
const replyContent = ref('')

const id = ref(undefined);
const newsDetail = ref({})

const handleReply = (parentComment) => {
  activeReplyId.value = activeReplyId.value === parentComment.id ? null : parentComment.id
  replyContent.value = ''
}



const getDetail = async () => {
	const res = await news_detail(id.value)
	newsDetail.value = res.data
}
onMounted(async () => {
	if (route.params.id) {
		id.value = route.params.id
		getDetail()
	} else {
		ElMessage({
			message: '参数错误',
			type: 'warning',
			duration: 2000
		})
	}
	loadComments()
})
const formatTime = computed(() => {
	return dayjs(newsDetail.value.publish_time).format('YYYY-MM-DD HH:mm:ss')
})
const isLike = ref(false)
const likeNews = async () => {
	const res = await like(id.value)
	isLike.value = res.data.liked
	getDetail()
}

// 加载评论
const loadComments = async () => {
	const res = await comment_list({ news_id: id.value, page: commentPage.value.page, page_size: commentPage.value.page_size })
	if (res.data.comments.length < res.data.total) {
		
	}
	comments.value = res.data.comments
}

// 提交评论
const submitComment = async () => {
	try {
		await comment_create({
			news: id.value,
			content: newComment.value.trim()
		})
		ElMessage.success('评论成功')
		newComment.value = ''
		loadComments()
		newsDetail.value.comment_count += 1 // 更新评论数
	} catch (error) {
		ElMessage.error(error.message || '评论失败')
	}
}

// 点赞评论
const toggleLike = async (comment) => {
	const res = await comment_like(comment.id)
	comment.like_count = res.data.like_count
	comment.liked = res.data.liked
}

// 时间格式化
const formatCommentTime = (time) => {
	return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 修改提交方法支持多级回复
const submitReply = async (parentComment) => {
	try {
		await comment_create({
			news: id.value,
			content: replyContent.value.trim(),
			parent: parentComment.id
		})
		ElMessage.success('回复成功')
		replyContent.value = ''
		activeReplyId.value = null
		loadComments() // 刷新评论列表
	} catch (error) {
		ElMessage.error(error.message || '回复失败')
	}
}

</script>
<style scoped lang="scss">
.news_detail {
	width: 100%;
	background: #E6E8EB;
	height: calc(100vh - 60px);
	overflow-y: scroll;

	.content {
		width: 70%;
		margin: 0 auto;
		min-height: 100%;
		background: #fff;
		padding: 20px;

		.title {
			display: flex;
			justify-content: center;
			font-size: 30px;
			font-weight: 600;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}


.reply-form {
	background: #f8f9fa;
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;
}

.comment-section {
	border-top: 1px solid #eee;
	padding-top: 30px;

	.comment-item {
		padding: 15px;
		margin: 15px 0;
		background: #f8f9fa;
		border-radius: 4px;

		.comment-header {
			display: flex;
			justify-content: space-between;
			color: #666;
			margin-bottom: 10px;
		}

		.comment-content {
			line-height: 1.6;
			color: #333;
		}

		.comment-actions {
			margin-top: 10px;
			text-align: right;
		}
	}
}

.child-comments {
  margin-left: 30px;
  border-left: 2px solid #eee;
  padding-left: 15px;

  .child-comment {
    position: relative;
    margin: 10px 0;
    
    &::before {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 10px;
      height: 2px;
      background: #ddd;
    }
  }
}
.child-comments {
  margin-left: 30px;
  border-left: 2px solid #eee;
  padding-left: 15px;

  .child-comment {
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      left: -15px;
      top: 20px;
      width: 10px;
      height: 2px;
      background: #ddd;
    }
  }

  .child-comments {
    margin-left: 20px;
    border-left: none;
  }
}

.reply-form {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}
</style>
